
import React, { useEffect, useState } from 'react';
import { Search, Flex, Skeleton, Typography } from 'react-vant';
import axios from '@/utils/axios';
import style from './Index.module.css'
const Index = () => {
  const [value, setValue] = useState('');
  const [list, setlist] = useState([])

  useEffect(() => {
    (
      async () => {
        const res = await axios.get('/date')
        setlist(res.data.data.list)
      }
    )
      ()
  }, [])
  return (
    <div>
      <Search
        shape="round"
        background="#4fc08d"
        value={value}
        onChange={setValue}
        placeholder="请输入搜索关键词"
      />

      <div className={style.zhen}>
        {
          list && list.map((item: any) => {
            return <Skeleton key={item.id} avatar loading={false}>
              <Flex className={style.demo}>
                <img alt="" src={item.image} />
                <div className={style.democontent}>
                  <Typography.Title>{item.name} {item.type} {item.keshi}</Typography.Title>
                  <Typography.Text type="secondary">
                    擅长：{item.shanc}
                    <p>评分{item.pingf_formatted} 接诊量：{item.reply_num} 同行认可：{item.goodsNum}</p>
                    <div className={style.tuwen}>
                      {item.service_list[0].name}:{item.service_list[0].price}元、
                      {item.service_list[1].name}:{item.service_list[1].price}元、
                      {item.service_list[2].name}:{item.service_list[2].price}元
                    </div>
                  </Typography.Text>
                </div>
              </Flex>
            </Skeleton>
          })
        }
      </div>

    </div>
  )
}

export default Index
